<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#name{
				border:1px solid #dedede;
				padding: 5px;
			}
			:focus {
			    outline: none;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">点击我</button>
		<input type="text" id="name" />
		<p id="p"></p>
		<script type="text/javascript">
			document.getElementById("btn").onclick = function(){
				alert("被点击了呀");
			}
			
			window.onload = function(){
				console.log("页面加载完成");
				
				var name = document.getElementById("name");
				name.onchange = function(){
					console.log("文本改变了");
					this.value = this.value.toUpperCase();
				}
				//输入时
				name.oninput = function(){
					this.value = this.value.toUpperCase();
					var p = document.getElementById("p");
					p.innerHTML = this.value;
				}
				//失去焦点
				name.onblur = function(){
					this.style.borderColor = "#dedede";
				}
				//获得焦点
				name.onfocus = function(){
					this.style.borderColor = "red";
				}
				
			}
			
		</script>
	</body>
</html>
